---
title: Toggles
description: Application UI toggle components built with Tailwind CSS v4. These responsive, customizable toggles are perfect for forms, settings, and user preferences in modern web applications. Enhance accessibility, SEO, and mobile usability with these interactive UI elements.
category: application
emoji: 🎚
slug: toggles
wrapper: h-[200px]
terms:
  - form
  - switch
components:
  - { title: 'Base', dark: true, plugins: ['@tailwindcss/forms'], contributors: ['Aniket1026'] }
  - {
      title: 'Base with icon',
      dark: true,
      plugins: ['@tailwindcss/forms'],
      contributors: ['Aniket1026'],
    }
  - {
      title: 'Material',
      dark: true,
      plugins: ['@tailwindcss/forms'],
      contributors: ['GlintonLiao'],
    }
  - { title: 'Apple', dark: true, plugins: ['@tailwindcss/forms'], contributors: ['GlintonLiao'] }
---

import CollectionHeader from '../../../components/CollectionHeader.astro'

<CollectionHeader>
  # Toggle Components

  <p>{frontmatter.description}</p>
</CollectionHeader>
